<template>
	<view class="content">
		<u-swiper :list="list"
				mode="round"
				title="true"
				height="400rpx"
				effect3d="true"
				autoplay="true"
				duration="350"
				border-radius="15"
				bg-color="transport"
				:title-style="titleStyle"
				indicator-pos="bottomCenter"></u-swiper>
		
		<u-gap height="20"></u-gap>
		
		<view class="list">
			<div class="item" v-for="(item, index) in list" :key=index>
				<view class="img">
					<image :src="item.image"
						mode="widthFix"
						shape="square"
						lazy-load="true"
						style="border-radius: 15rpx;"
						></image>
				</view>
				<view class="info">
					<view class="title">{{ item.title }}</view>
				</view>
			</div>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				titleStyle: {
					fontSize: '45rpx',
					color: '#2979ff',
					fontWeight: 'blod',
					textAlign: 'center',
				}
			}
		},
		onLoad() {
			this.getProjects()
		},
		methods: {
			getProjects(){
				var _this = this;
				_this.$u.get('projects', {}, {
					'x-token': 'guojia',
				}).then(res => {
					_this.datas = res.datas;
					_this.length = res.length;
					_this.code = res.code;
					if( res.length > 0 ){
						for(var i=0; i<res.length; i++){
							var dic = {}
							dic["title"] = res.datas[i]["name"];
							dic["image"] = res.datas[i]["img"];
							console.log(dic)
							_this.list.push(dic)
						}
					}
					else{
						var dic = {}
						dic["title"] = "Ooops!~"
						dic["image"] = 'https://st-gdx.dancf.com/gaodingx/65/design/20190625-112408-ea03.png'
						_this.list.push(dic)
					}
					if( res.code === 404 ){
						_this.$refs.uToast.show({
							title: 'Ooops!~',
							type: 'error',
							duration: 2000
						})
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100%;
		min-height: 100vh;
		background-color: #161827!important;
		padding: 20rpx;
	}
	.list {
		padding: 10rpx;
		.item {
			padding: 10rpx 0;
			display: flex;
			.img {
				flex: 1;
				padding: 10rpx;
				image {
					width: 400rpx;
					height: 350rpx;
				}
			}
			.info {
				flex: 1;
				padding: 0 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.title {
					font-size: 30rpx;
					color: #ed2f85;
					text-align: center;
					font-weight: bold;
					
				}
			}
		}
	}
</style>
